[Day26] 前端13：Register.vue

第 12 屆 iThome 鐵人賽

DAY 26

Modern Web

普通人寫前後端，可以挺過30天吧！？系列第 26 篇

12th鐵人賽

q98765tw

團隊imac_web_Sr

2020-10-09 00:15:58

733 瀏覽

分享至

還記得嗎？我們當時開的api裡面也有註冊api喔，那非常簡單的我直接把Home.vue稍微改一下版面，就可以拿來使用了！

//反正我很閒

Register.vue

<template>
<v-app id="inspire">
    <v-main>
        <v-container class="fill-height" fluid>
            <v-row align="center" justify="center">
                <v-col cols="12" sm="8" md="10">
                    <v-card class="elevation-12">
                        <v-toolbar color="primary" dark flat>
                            <v-toolbar-title>Register</v-toolbar-title>
                            <v-spacer></v-spacer>
                            <v-tooltip bottom>

                                <span>Source</span>
                            </v-tooltip>
                        </v-toolbar>
                        <v-card-text>
                            <v-form>
                                <v-text-field v-model="login" label="Login" name="login" prepend-icon="mdi-account" type="text"></v-text-field>
                                <v-text-field v-model="email" label="email" name="email" prepend-icon="mdi-email" type="text"></v-text-field>

                                <v-text-field v-model="password" id="password" label="Password" name="password" prepend-icon="mdi-lock" type="password"></v-text-field>
                            </v-form>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn v-on:click="register()" color="primary">register</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-main>
</v-app>
</template>

接下來是script的部分

<script>
export default {

    props: {
        source: String,

    },
    data: () => ({
        login: "",
        email: "",
        password: "",

    }),
    methods: {

        register() {
            const vm = this;
            vm.axios.post('http://localhost:8000/api/register', {
                    name: vm.login,
                    email: vm.email,
                    password: vm.password
                }, {
                    headers: {
                        Accept: 'application/json',
                    }

                })
                .then(function (response) {
                    vm.error = false;
                    console.log(response);
                    localStorage.setItem("item", response.data.token);
                    vm.$router.push('/about/1');
                })

        }
    }
}
</script>